<script setup lang='ts'>
import Picking from "./cousePicking/Picking.vue"
import { XbsjEarthUi } from '../../scripts/xbsjEarthUi';
import Button from '../../components/Button.vue';
import { inject, onBeforeUnmount, onMounted, ref } from 'vue';
import RightList from '../../components/RightList.vue';

import { SceneTree } from 'xbsj-xe2/dist-node/xe2';
import { Message } from 'earthsdk-ui';
import { ES3DTileset, ESGeoJson } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const sceneTree = inject('sceneTree') as SceneTree
const mousePick = ref(false)
const checkedColor = ref<[number, number, number, number]>([1, 0, 0, 1])
const propertyIsShow = ref(false)
const destroyClick = () => {
    if (dispose) {
        dispose()
        dispose = null
    }
}
let dispose: any = null
let sceneobject: ES3DTileset
function isAllDigits(str: any) {
    return str && !isNaN(str)
}
onMounted(() => {
    const update = () => {
        const viewer = xbsjEarthUi.activeViewer
        dispose = viewer?.clickEvent.don(async e => {
            if (!e.screenPosition) return
            if (!mousePick.value) return
            let result = undefined
            const res = await viewer.pick(e.screenPosition)
            if (res) {
                result = res
            }
            // if (!result) return
            console.log('result', result);
            if (result && result.sceneObject) {
                const treeItem = sceneTree.getTreeItemFromSceneObjId(result.sceneObject.id)
                if (treeItem) {
                    const uiTreeObj = treeItem.uiTreeObject
                    sceneTree.uiTree.clearAllSelectedItems()
                    uiTreeObj.selected = true
                    xbsjEarthUi.propSceneTree = treeItem
                }
                if (result.childPickedInfo && result.sceneObject instanceof ESGeoJson) {
                    const sceneObject = result.sceneObject
                    const childPickedInfo = result.childPickedInfo
                    //@ts-ignore
                    if (childPickedInfo.geojsonPickInfo) {
                        //@ts-ignore
                        const properties = childPickedInfo.geojsonPickInfo.properties
                        //@ts-ignore
                        const geometry = childPickedInfo.geojsonPickInfo.geometry
                        // const keys = Object.keys(properties);
                        // console.log(properties,keys);

                        // sceneObject.flyToFeature(keys[0], properties[keys[0]])
                        if (propertyIsShow.value) return
                        xbsjEarthUi.cesiumPick = { ...properties, ...geometry }
                    }
                }
                if (result.sceneObject instanceof ES3DTileset) {
                    sceneobject = result.sceneObject
                    sceneobject.resetFeatureStyle()
                    //@ts-ignore
                    const list = result.childPickedInfo.tilesetPickInfo
                    if (list && Object.keys(list).length !== 0) {
                        const id = list.id
                        if (id) {
                            const style = [
                                { value: id, rgba: checkedColor.value },
                            ]
                            result.sceneObject.setFeatureColor('id', style)
                        } else {
                            Message.warning('未在该瓦片的属性表中找到ID字段，无法实现选中着色功能。')
                        }
                        if (propertyIsShow.value) return
                        for (let key in list) {
                            if (key !== 'name' && !key.includes('id') && !key.includes('ID')) {
                                if (isAllDigits(list[key])) {
                                    list[key] = Number(list[key]).toFixed(2)
                                }
                            }
                        }
                        xbsjEarthUi.cesiumPick = list
                    }
                }
            }
        })
    }
    update()
    const dispos = xbsjEarthUi.activeViewerChanged.disposableOnce(update)
    onBeforeUnmount(() => {
        dispos()
        destroyClick()
        if (sceneobject) {
            sceneobject.resetFeatureStyle()
        }
    })
})
const changeMousePick = () => {
    const viewer = xbsjEarthUi.activeViewer
    if (!viewer) return
    viewer.changeToMap()
    xbsjEarthUi.roamMode = 'Map'
    mousePick.value = !mousePick.value
    if (!mousePick.value) {
        if (sceneobject) {
            sceneobject.resetFeatureStyle()
        }
    }
}
const ok = (rgba: [number, number, number, number]) => {
    checkedColor.value = rgba
}
const changePropertyIsShow = () => {
    propertyIsShow.value = !propertyIsShow.value
    if (propertyIsShow.value) {
        xbsjEarthUi.cesiumPick = undefined
    }
}
</script>

<template>
    <RightList :title="'鼠标拾取'">
        <Button :name="'shubiaoshiqu'" :content="'鼠标拾取'" :click="changeMousePick" :actived="mousePick"
            :left-button="true"></Button>
        <Picking v-if="mousePick" @ok="ok" :checkedColor="checkedColor" :propertyIsShow=propertyIsShow
            @changeProp="changePropertyIsShow"></Picking>
    </RightList>
</template>
